<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include/head::head"></head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div th:replace="/include/sidebar"></div>

        <!-- top navigation -->
        <div th:replace="include/navigation::navigation"></div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">

            <div class="row">
                <div class="col-md-12 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>软件工程试卷库</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card-box table-responsive">
                                        <table id="MyDatatable" class="table table-striped table-bordered"
                                               style="width:100%">
                                            <thead>
                                            <tr>
                                                <th>试卷编号</th>
                                                <th>试卷名称</th>
                                                <th>创建人</th>
                                                <th>创建时间</th>
                                                <th>试卷内容</th>
                                                <th>试卷难度</th>
                                                <th>试卷总分</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                            <tr th:each="ex:${examList}">
                                                <td th:text="${ex.exam.examId}"></td>
                                                <td th:text="${ex.exam.examName}"></td>
                                                <td th:text="${ex.examCreator}"></td>
                                                <td th:text="${ex.examCreateTime}"></td>
                                                <td th:text="${ex.exam.examContent}"></td>
                                                <td th:text="${ex.exam.examDifficulty}"></td>
                                                <td th:text="${ex.exam.examScore}"></td>
                                                <td class="col-operate">
                                                    <button type="button"
                                                            class="btn btn-modify btn-warning btn-sm download-exam">下载试卷
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- /page content -->
        <!-- footer content -->
        <div th:replace="include/footer::footer"></div>
        <!-- /footer content -->
    </div>
</div>

<div th:replace="include/javascript::javascript"></div>

<script th:inline="javascript">
    $(function () {
        $("#MyDatatable").DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'bAutoWidth': false,
            'info': true,
            'autoWidth': false,
            'aLengthMenu':[5,10,20],
            'columnDefs': [
                {
                    "targets": [0,4],
                    className: "hide-column"
                },
                {
                    "targets": [1,2,3],
                    "Sorting": false,
                    "render": function (data, type, row, meta) {
                        // var order1 = meta.settings._iDisplayStart + meta.row + 1;
                        // var order2 = order1 + '、';
                        return type === 'display' && data.length > 20 ?
                            '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
                    }
                },

            ]
        });
        $(".download-exam").on("click",function () {
            var tds=$(this).parent().parent().find("td");
            var paperPath=tds.eq(4).text();
            window.location.href="/exam/download_paper?path="+paperPath;
        })
    })
</script>
</body>
</html>
